<template>
  <header class="head">
    <img src="../assets/images/timg.jpg" alt="" style="width:60px;height:60px">
    <h2>电影院会员管理系统</h2>
    <Daohan :userinfo="userinfo"/>
    <div class="infos">
      <p>欢迎你:{{userinfo.username}}</p>
      <Avatar :userinfo="userinfo"/>
      <p>
        <el-tag effect="dark" :type="userinfo.roleid | colortype">{{userinfo.roleid | rolename}}</el-tag>
      </p>
      <p>
        <el-button @click="logout" type="danger" icon="el-icon-switch-button" circle></el-button>
      </p>
    </div>
  </header>
</template>

<script>
import Avatar from "./uploadavatar.vue"
import Daohan from "@/components/daohan.vue"
export default {
  components:{
      Daohan,
      Avatar
  },  
  props: ["userinfo"],
  methods: {
    logout() {
      this.$confirm("你确定要退出登录吗, 是否继续?", "退出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {//成功回调，点击确定
          sessionStorage.removeItem("token"); // 删除token 判断是否登录的标志
          localStorage.removeItem("mobile")//删除本地存储的电话
          this.$router.push({ name: "login" });//token失效，跳转到登录
        })
        .catch(() => {});//失败回调，点击取消关闭弹框
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h2 {
    color: #fff;
    font-size: 24px;
  }
  .infos {
    display: flex;
    align-items: center;
    p {
      margin: 0 6px;
      cursor: pointer;
    }
  }
  .el-menu-demo{
      width: 900px;
      display: flex;
      justify-content: space-between;
      .el-menu-item{
          flex: 1;
      }
  }
}
</style>